<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1400px;margin: 0 auto">
                <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
                <a href="/">首页</a>
                <el-divider direction="vertical"></el-divider>
                <a href="/case.html">设计案例</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">家居商城</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">我要装修</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">设计团队</a>
                <el-divider direction="vertical"></el-divider>
                <a href="evaluate.html">用户点评</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">关于我们</a>
                <el-divider direction="vertical"></el-divider>
                <span class="tel">400-800-3200</span>
            </div>
            <!--导航菜单开始-->
            <div style="background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#82c8ec"
                    text-color="#fff"
                    active-text-color="#fff">
                <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>

                    <div style="float: right;position: relative;top: 10px">
                        <el-input placeholder="请输入搜索内容" v-model="wd">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>
            </el-menu>
            </div>
            <!--导航菜单结束-->

        </el-header>
        <el-main>
            <el-table :data="ordersArr"
                      style="width: 100%">
                <!--type=index 设置这一列显示的内容为编号-->
                <el-table-column type="index" label="编号"></el-table-column>
                <el-table-column prop="title" label="商品" width="200"></el-table-column>
                <el-table-column prop="price" label="价格" width="80"></el-table-column>
                <el-table-column prop="num" label="数量" width="80"></el-table-column>
                <el-table-column
                        label="商品图片"
                        width="100">
                    <template slot-scope="scope">
                        <!--scope.row代表当前行对应数组中的对象-->
                        <img :src="scope.row.url" width="100%">
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <!--scope里面装着当前行所对应的对象信息
                    scope.$index 得到当前行对应的对象在数组中的下标
                    scope.row 得到当前行对应的对象
                    -->
                    <template slot-scope="scope">
                        <el-popconfirm
                                title="您确定删除此商品吗?"
                                @confirm="ordersDel(scope.$index, scope.row)"
                        >
                            <el-button slot="reference"  size="mini"
                                       type="danger">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <input type="button" value="立即支付">
            </div>
        </el-main>
    </el-container>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex:"",
                wd:"",
                categoryArr:[],
                ordersArr:[{url:"", title:"", price:"", num:""}],
                sum:"",
                user:{
                    id:"",
                    username:""
                }
            }
        },
       methods: {
           handleSelect(key,keyPath){
               console.log(key,keyPath);
               location.href="/result.html?id="+key;
           },
           ordersDel(index,orders){
               axios.get("/deleteById?id="+orders.id).then(function (response) {
                   v.ordersArr.splice(index,1);
               })
           }

       },
       created:function () {
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
           //发请求通过id获取订单详情
           let uid = location.search.split("=")[1];
           axios.get("/orders/selectById/detail?id="+uid)
                    .then(function (response) {
               v.ordersArr = response.data;
           })

           axios.get("/currentUser").then(function (response) {
               v.user = response.data;
               if (v.user==""){
                   alert("请先登录!")
                   location.href="/login.html"
               }
           })

       }
   })
</script>
</html>
